<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>全部考勤</title>
</head>
<body>

<script type="text/javascript" src="./$.js"></script>
<script>
    require(['!this.js'], $$.load)
</script>
</body>
</html>


<!--tpl部分-->
<template type="text/html" data-name="this.htm">

    <div>
        <div class="all" v-if="data">
            <div class="weui-search-bar my-search-bar" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索"
                               required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText">
                        <i class="weui-icon-search"></i>
                        <span>搜索姓名/分组</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>

            <div class="mylist">
                <div class="mylistItem" v-for="(result,index) in data.top">
                    <div class="title" @click="openTag(result.id,index,result.location)" v-if="result.count!=0">
                        <div v-if="result.a==1">
                            <img src="../$res/imgers/triangle_right.png">
                        </div>
                        <div v-if="result.a==-1">
                            <img src="../$res/imgers/triangle_down.png">
                        </div>

                        <span>{{result.name}}</span>
                        <span>{{result.count}}</span>
                    </div>

                    <div class="mylist_content" v-if="result.a==-1">
                        <a class="mylist_con_item" v-for="info in result.child.list" :href="'me.html?id='+info.id+'&name='+info.name">

                            <img v-if="info.avatar!=''" :src="info.avatar">
                            <img v-else src="../$res/imgers/default_img.png">

                            <div class="mess">
                                <div class="left">
                                    <span>{{info.name}}</span>
                                </div>
                                <div class="right_nocapsule">{{info.dept}}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="mylist">
                <div class="mylistItem" v-for="(result,index) in data.bottom">
                    <div class="title" @click="openTag(result.id,index,result.location)">
                        <div v-if="result.a==1">
                            <img src="../$res/imgers/triangle_right.png">
                        </div>
                        <div v-if="result.a==-1">
                            <img src="../$res/imgers/triangle_down.png">
                        </div>

                        <span>{{result.name}}</span>
                        <span>{{result.count}}</span>
                    </div>

                    <div class="mylist_content" v-if="result.a==-1">
                        <a class="mylist_con_item" v-for="info in result.child.list" :href="'me.html?id='+info.id+'&name='+info.name">
                            <img v-if="info.avatar!=''" :src="info.avatar">
                            <img v-else src="../$res/imgers/default_img.png">

                            <div class="mess">
                                <div class="left">
                                    <span>{{info.name}}</span>
                                    <div class="left_add">{{info.first_time}}</div>
                                </div>
                                <div class="right" v-if="info.status=='working'">工作中</div>
                                <div class="right_rest" v-if="info.status=='xiujia'">休假中</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="nav_null"></div>
        </div>
        <foot current="all"></foot>
    </div>

</template>

<!--JS部分-->
<script data-name="this.js">

    function get_list() {
        $$.ajax(
            {
                url: "/kaoqin/all/count",
                data: {}
            },
            {
                $200: function (ret) {
                    weui.loading().hide();
                    /*child: 因为列表和每个item对应的内容是两个接口。在点击列表某项后向另外一个接口拿到item内容并由前端手动追加该list这个数据上。于是造了一个child字段。
                     location: 因为该json格式决定，本页面分为上下两部分，且两部分字段不同。当点击list的某一个时，在请求详情的接口时需要知道它是top还是down
                     a: 为了控制list小三角的上下翻转，给list每条数据都添加了a字段。a默认为1，当点击一次就取相反数。由正负1来判断该三角的翻转方向。*/
                    for (var i = 0; i < ret.data.top.length; i++) {
                        ret.data.top[i].child = false;
                        ret.data.top[i].location = 'top';
                        ret.data.top[i].a = 1;
                    }
                    for (var i = 0; i < ret.data.bottom.length; i++) {
                        ret.data.bottom[i].child = false;
                        ret.data.bottom[i].location = 'down';
                        ret.data.bottom[i].a = 1;
                    }
                    $$.m.data = ret.data;
                }
            });
    }

    /*本方法为打开列表。由本页面初始加载接口拿到的数据渲染出列表的视图，点击该视图上的某项，将该项的id、该项的下标值、该项属于top或者bottom的值传给详情接口。
    拿到该接口的值后，判断出发的项是top或者down后赋值该值给top或down下对应下标的数据的child*/
    function openTag(id, index, location) {
        var listTitle = location == 'top'?$$.m.data.top[index]:$$.m.data.bottom[index];

        if (listTitle.a == 1 && listTitle.child == false) {
            weui.loading("加载中");
            $$.ajax({
                url: "/kaoqin/all/lists",
                data: {
                    id: id
                },
                result: {
                    $200: function (ret) {
                        weui.loading().hide();
                        listTitle.child = ret.data;
                        listTitle.a = -listTitle.a;
                    }
                }
            });
        } else {
            listTitle.a = -listTitle.a;
        }
    }

    require('../$res/js/common');
    module.exports = {
        template: require('!this.htm'),
        methods: {
            openTag: openTag
        },
        components: {
            foot: web.foot
        },
        loaded: function () {
            $$.m = {
                data: false
            };
            weui.loading("加载中");
        },
        mounted: function () {
            get_list()
        }
    };
</script>